<template>
  <div class="all">
      <van-nav-bar :fixed="true" left-text="确定订单" left-arrow @click-left="onClickLeft"
  />
  <main>
    <div class="address">
        <div class="model" v-if="show">
            <p class="map"><van-icon name="location-o" /></p>
            <div>
              <h2>
                  <span>{{address.receiver}}</span>
                  <span>{{address.mobile}}</span>
              </h2>
              <p>{{address.address}}</p>
              <p>收费不便时,可选择免费暂存服务</p>
            </div>
            <van-icon @click="rightadd" class="right" name="arrow" />
        </div>
        <div @click="rightadd" class="model second" v-if="show_a">
            <h2>请选择默认地址</h2>
            <van-icon  class="right" name="arrow" />
        </div>     
   </div>
   <div class="detailPro" v-for="(item,i) in detail" :key="i">
       <van-card
         :num="item.quantity"
         :price="item.product.price"
         :desc="item.product.descriptions"  
         :title="item.product.name"
         :thumb="item.product.coverImg"
        />
        <p>小计：￥{{item.quantity*item.product.price}}</p>
   </div>
   
   </main>
   <div class="card-footer" >
     <span>合计：<b>￥{{sum}}</b></span>
     <span @click="submit">提交订单</span>
   </div>
<div class="payment" v-if="showBoard">
    <van-password-input
  :value="value"
  info="密码为 6 位数字"
  :focused="showKeyboard"
  @focus="showKeyboard = true"
/>
<!-- 数字键盘 -->
<van-number-keyboard
  :show="showKeyboard"
  @input="onInput"
  @delete="onDelete"
  close-button-text="完成"
  @close="check()"
  @blur="showKeyboard = false"
  
/>
</div>
<van-overlay :show="overShow" @click="overShow = false" />
</div>
</template>

<script>
import * as api from '@/api/order'
export default {
    name:'WriteOrder',
    data(){
        return{
            address:{},
            show:false,
            show_a :false,
            detail:'',
            sum:'',
            value:'',
            showKeyboard: false,
            overShow:false,
            showBoard:false,
        }
    },
methods:{
    submit(){
        this.showKeyboard = true
        this.overShow = true
        this.showBoard = true
    },
     onInput(key) {
      this.value = (this.value + key).slice(0, 6);
    },
    check(){
        if(this.value.length==6){
            if(this.value=='666666'){
                this.$router.push('/orderDetail/'+this.$route.params.id)
            }else{
                console.log('密码输入错误')
                this.$dialog.alert({
                    message: '密码输入错误'
                });
              this.value = ''
              this.showKeyboard = true
            }
        }
    },
    onDelete() {
      this.value = this.value.slice(0, this.value.length - 1);
    },
    onClickLeft(){
        this.$router.go(-1)
    },
    rightadd(){
        this.$router.push('/myaddress')
    },
},
mounted(){
    console.log(this.$store.state.address)
    if(this.$store.state.address.receiver == undefined){
        console.log('没有添加地址')
        this.show = false
        this.show_a = true
    }else{
        console.log('已经有地址')
        this.address = this.$store.state.address
        this.show = true
        this.show_a = false
    }
    api.getOrderDetail(this.$route.params.id).then((data)=>{
        this.detail=data.data.details
        let sum=0;
        this.detail.map(v=>{
            console.log(v.price,v.quantity)
            sum+=v.price*v.quantity
        })
        this.sum=sum
    })
    
}
}
</script>

<style scoped>
.van-password-input{
    margin-top: 80px;
    
}
.van-password-input__security li{
    border:1px solid #eee
}
.all{
    background: #ffffff;
}
.address{
    position: relative;
    margin-top: 60px;
}
.address .model{
  display: flex;
  padding: 10px 20px;
  margin: 10px 15px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0 2px 10px #dedede;
  border-radius: 10px;
  height:83px;
}
.address .map{
  width: 40px;
  height: 40px;
  background: linear-gradient(-45deg,rgb(248, 43, 7),rgb(250, 147, 99));
  text-align: center;
  box-sizing: border-box;
  border-radius: 50%;
  padding: 7px;
  margin-right: 20px;
  margin-top: 10px;
}
.address .second h2{
    font-size:14px;
    line-height: 56px;
    color:#666;
    margin:0 120px 0 0;
}
.address .map .van-icon{
  font-size: 26px;
  color: #fff
}
.address div h2{
  font-size: 14px;
  color: #111;
  line-height: 26px; 
}
.address div h2 span:nth-of-type(2){
  margin-left: 10px;
  color: #333
}
.address div p{
  line-height: 20px;
  color: #333;
  font-size:12px;
}
.address .van-icon{
  font-size: 20px;
  color: #999; 
}
.address div p:nth-of-type(2){
  color: rgb(247, 54, 54);
  font-size: 12px
}
.address .right{
  margin: 15px 0 0 50px; 
}
.detailPro{
    margin: 20px 15px;
    box-shadow: 0 2px 10px #dedede;
    padding-bottom: 10px
}
.detailPro p{
    margin-left: 260px;
}
main{
    margin-bottom: 100px;
}
.card-footer{
    text-align:right;
    color:#333;
    display:flex;
    bottom: 0;
    width: 100%;
    height: 65px;
    position:fixed;
    background: #fff;
    padding: 10px;
    box-sizing: border-box;
}
.card-footer span:nth-of-type(1){
    font-size:14px;
    margin: 10px 40px 0 120px; 
}
.card-footer span:nth-of-type(1) b{
    color: rgb(233, 58, 58)
}
.card-footer span:nth-of-type(2){
    color: #fff;
    display: block;
    font-size:14px;
    height: 20px;
    padding: 10px 20px;
    border-radius: 20px;
    background: rgb(31, 189, 17)
}

.payment{
    height:400px;
    position: fixed;
    background:#fff;
    bottom:0;
    z-index:10;
    width:100vw;
}
.van-password-input{
    margin:0 auto;
    left:0; right:0;
    position:absolute;
    width:90%;
}
</style>